{% extends "base.html" %}

{% block title %}数据库连接配置 - 在线跑批系统{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="fas fa-database me-2"></i>数据库连接配置</h1>
    <a href="{% url 'db_connection_create' %}" class="btn btn-primary">
        <i class="fas fa-plus me-1"></i> 新增连接
    </a>
</div>

{% if messages %}
    {% for message in messages %}
    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    {% endfor %}
{% endif %}

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>数据库类型</th>
                        <th>主机</th>
                        <th>端口</th>
                        <th>数据库名</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for connection in connections %}
                    <tr>
                        <td>{{ connection.name }}</td>
                        <td>{{ connection.get_db_type_display }}</td>
                        <td>{{ connection.host }}</td>
                        <td>{{ connection.port }}</td>
                        <td>{{ connection.database_name }}</td>
                        <td>
                            {% if connection.is_active %}
                            <span class="badge bg-success">激活</span>
                            {% else %}
                            <span class="badge bg-secondary">未激活</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{% url 'db_test_connection' connection.pk %}" class="btn btn-outline-primary" title="测试连接">
                                    <i class="fas fa-check-circle"></i>
                                </a>
                                <a href="{% url 'db_connection_edit' connection.pk %}" class="btn btn-outline-secondary" title="编辑">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <a href="{% url 'db_connection_delete' connection.pk %}" class="btn btn-outline-danger" title="删除">
                                    <i class="fas fa-trash"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="text-center py-4">
                            <div class="text-muted">
                                <i class="fas fa-info-circle me-1"></i> 暂无数据库连接配置，请点击"新增连接"创建
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}
